<template>
  <div class="from_table_box">
    <div class="header_box">
      <div class="tab">
        <div class="tab_item">
          商品管理
        </div>
        <!--  @click="tabClick(1)"         :class="table_one == true ? 'tab_item_click' : ''"-->
        <!-- <div
          class="tab_item"
          :class="table_one == false ? 'tab_item_click' : ''"
          @click="tabClick(2)"
        >
          套票项
        </div> -->
      </div>
      <div class="button_box">
        <div
          class="el-icon-plus button_item"
          @click="
            () => {
              this.$refs.table_one.addRow();
            }
          "
        >
          &nbsp;添加
        </div>
        <div
          class="el-icon-close button_item"
          @click="
            () => {
              this.$refs.table_one.delRows();
            }
          "
        >
          &nbsp;删除行
        </div>
        <!-- <Button> 添加 </Button> -->
      </div>
    </div>
    <div class="table_box">
      <vol-table
        v-show="table_one"
        ref="table_one"
        :loadKey="true"
        :columns="columns"
        :height="210"
        :defaultLoadPage="false"
        @loadBefore="loadBefore"
        :endEditAfter="endEditAfter"
        :row-index="true"
        :columnIndex="true"
        :index="true"
        :click-edit="true"
        :tableData="tableData"
        :paginationHide="true"
      ></vol-table>
      <!-- <vol-table
        v-show="table_two"
        ref="table_two"
        :loadKey="true"
        :columns="columnsTicket"
        :pagination-hide="false"
        :height="210"
        :columnIndex="false"
        :index="true"
        :click-edit="true"
        :tableData="ticketTableData"
        :paginationHide="true"
        :summary="true"
      ></vol-table> -->
    </div>
    <vol-box
      :model.sync="model.box"
      title="套票项"
      :height="600"
      :width="1000"
      :padding="15"
    >
      <div class="button_box01">
        <div class="el-icon-plus button_item" @click="btnClick(table_one)">
          &nbsp;添加
        </div>
        <div
          class="el-icon-close button_item"
          @click="
            () => {
              this.$refs.table_two.delRows();
            }
          "
        >
          &nbsp;删除行
        </div>
      </div>
      <vol-table
        ref="table_two"
        :loadKey="true"
        :columns="columnsTicket"
        :pagination-hide="false"
        :height="510"
        :columnIndex="false"
        :index="true"
        :click-edit="true"
        :tableData="ticketTableData"
        :paginationHide="true"
        :summary="true"
      ></vol-table>
      <div slot="footer">
        <Button type="primary" @click="closeChild()">确认</Button>
      </div>
    </vol-box>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from "@/components/basic/VolBox.vue";
import Icons from "@/components/basic/Icons.vue";
import json5, { stringify } from "json5";
export default {
  components: {
    VolTable,
    Icons,
    VolBox
  },
  data() {
    return {
      rowChild: {},
      spare11: 0,
      model: { box: false },
      // 表格显示隐藏
      table_one: true,
      table_two: false,
      // 商品管理表 记录
      del_list: [],
      // 商品管理表格
      tableData: [],
      tableDatabefore: [],
      columns: [
        {
          field: "name",
          title: "商品名称",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
          edit: { type: "text", required: true }
        },
        {
          field: "code",
          title: "商品编码",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
       
        },
        {
          field: "offlineCode",
          title: "线下编码",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          edit: { type: "text" }
        },
        {
          field: "originalPrice",
          title: "门市价",
          type: "decimal",
          width: 90,
          align: "left",
          sortable: true,
          hidden: false,
          edit: { type: "decimal", required: true }
        },
        {
          field: "preferentialPrice",
          title: "优惠价",
          type: "decimal",
          width: 90,
          align: "left",
          hidden: true,
          edit: { type: "decimal", required: true }
        },
        {
          field: "attributes",
          title: "属性",
          type: "string",
          width: 220,
          align: "left",
          hidden: false
        },
        {
          field: "spare12",
          title: "优惠价",
          type: "decimal",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "spare11",
          title: "优惠价",
          type: "decimal",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "Render",
          title: "操作",
          fixed: "right",
          width: 160,
          render: this.getRenderOperate()
        }
      ],
      //套票项表格
      ticketTableData: [],
      ticketTableDataNow: [],
      columnsTicket: [
        {
          field: "id",
          title: "产品ID",
          type: "string",
          width: 120,
          align: "left",
          hidden: true,
          require: true
        },
        {
          field: "goodName",
          title: "商品名称",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
   
        },
        {
          field: "goodCode",
          title: "商品编码",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true
        },
        {
          field: "hotel_ID",
          title: "酒店id",
          type: "string",
          width: 120,
          align: "left",
          hidden: true
        },
        {
          field: "price",
          title: "平摊价",
          type: "decimal",
          width: 90,
          align: "left",
          sortable: true,
          hidden: false,
          edit: { type: "decimal", required: true }
        },
        {
          field: "number",
          title: "数量",
          type: "int",
          width: 120,
          align: "left",
          hidden: false,
          edit: { type: "number" }
        }
      ],
    };
  },
  created() {
    this.resetSearch(); // 清空表格数据
    this.dataTable();
  },
  methods: {
    // 重置表
    resetSearch() {
      this.table_one = true;
      this.table_two = false;
      this.tableData = [];
      this.ticketTableData = [];
    },
    // 表格赋值数据
    dataTable() {
      let that = this.$store.getters.data().reportPrice;
      console.log("表格渲染", that.currentAction);
      if (that.currentAction == "Add") {
      } else if (that.currentAction == "update") {
        let params = {
          order: "desc",
          page: 1,
          rows: 100,
          sort: "id",
          value: that.rowId,
          wheres: "[]"
        };
        this.http
          .post("/api/PackageProducts/getDetailPage", params)
          .then(res => {
            if (res.rows) {
              this.tableDatabefore = res.rows;
              that.del_list = [];
              res.rows.forEach(item => {
                that.del_list.push(item);
              });
              this.http
                .post("/api/PackageProducts/GetDetailPackagePage", params)
                .then(res => {
                  this.ticketTableDataNow = res.data.rows;
                  console.log("从表数据2原来的", this.tableDatabefore);
                  if (this.tableDatabefore.length < 1) {
                    tableDatabefore.spare12 = this.ticketTableDataNow;
                  } else {
                    this.tableDatabefore.forEach(item => {
                      if (item.spare12 == null) {
                        item.spare12 = this.ticketTableDataNow;
                      }
                    });
                  }
                });
              this.tableData = this.tableDatabefore;
            }
          });
      }
    },
    // tab切换
    // tabClick(num) {
    //   if (num == 1) {
    //     this.table_one = true;
    //     this.table_two = false;
    //   } else if (num == 2) {
    //     this.table_one = false;
    //     this.table_two = true;
    //   } else {
    //     this.table_one = true;
    //     this.table_two = false;
    //   }
    // },
    // 添加按钮
    btnClick(type) {
      let that = this.$store.getters.data().reportPrice;
      // console.log("添加", type);
      // if (type) {
      //   this.$refs.table_one.addRow();
      // } else {
      console.log("获取上级", this.$store.getters.data().reportPrice);
      that.$refs.modelBody.open(this.ticketTableData);
      // }
    },
    // 删除按钮
    // delClick(type) {
    //   if (type) {
    //     this.$refs.table_one.delRows();
    //   } else {
    //     this.$refs.table_two.delRows();
    //   }
    // },
    loadBefore(params, callback) {
      //设置查询 条件

      var _row;
      //获取主表选中的行
      this.$emit("parentCall", $vue => {
        var rows = $vue.getSelectRows();
        if (rows.length) {
          _row = rows[0];
        }
      });
      if (!_row) {
        //取消选中，清空明细
        return (this.$refs.tableList.rowData.length = 0);
        //  return this.$Message.error("请选中主表行数据");
      }

      //设置查询条件，用主表id加载明细表数据(如果是自己定义的接口，这里条件自己处理)
      params.value = _row.Order_Id;
      //设置排序字段(如果是自己定义的接口，排序字段不一定填写)
      if (!params.sort) {
        params.sort = "CreateDate";
      }
      return callback(true);
    },
    endEditAfter(row) {
      //结束编辑时，可以直接调用后台的代码进行保存
      console.log(row);
      return true;
    },
    save(row) {
      this.$Message.info("保存");
    },
    del(row) {
      this.$confirm(
        "确认要删除此行数据【" + row.ProductName + "】？？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认删除",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "提交删除请求"
          });
        })
        .catch(action => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "放弃删除" : "停留在当前页面"
          });
        });
    },
    // getRender() {
    //   return (h, { row, column, index }) => {
    //     return h("div", { style: {} }, [
    //       h(
    //         "a",
    //         {
    //           props: {},
    //           style: { "border-bottom": "1px solid" },
    //           on: {
    //             click: (e) => {
    //               e.stopPropagation();
    //               this.del(row);
    //             },
    //           },
    //         },
    //         "删除1"
    //       ),
    //       h(
    //         "a",
    //         {
    //           props: {},
    //           style: { "margin-left": "9px", "border-bottom": "1px solid" },
    //           on: {
    //             click: (e) => {
    //               e.stopPropagation();
    //               this.$refs.tableList.edit.rowIndex = index;
    //             },
    //           },
    //         },
    //         "编辑"
    //       ),
    //       h(
    //         "a",
    //         {
    //           props: {},
    //           style: { "margin-left": "9px", "border-bottom": "1px solid" },
    //           on: {
    //             click: (e) => {
    //               e.stopPropagation();
    //               //强制结束编辑
    //               this.$refs.tableList.edit.rowIndex = -1;
    //               this.save();
    //             },
    //           },
    //         },
    //         "保存"
    //       ),
    //     ]);
    //   };
    // },
    getRenderOperate() {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: e => {
                  console.log(row, "套票项");
                  this.spare11 = row.elementIdex;
                  let that = this.$store.getters.data().reportPrice;
                  if (that.currentAction == "update") {
                    if (typeof row.spare12 == "string") {
                      this.ticketTableData =
                        row.spare12 == null ? [] : JSON.parse(row.spare12);
                    } else {
                      this.ticketTableData =
                        row.spare12 == null ? [] : row.spare12;
                    }
                  } else {
                    this.ticketTableData =
                      row.spare12 == null ? [] : row.spare12;
                  }

                  this.model.box = true;
                }
              }
            },
            "套票项  "
          )
        ]);
      };
    },
    closeChild() {
      if (this.ticketTableData.length == 0) {
        return this.$message.error("请添加数据")
      }
      if (this.tableData.length == 1) {
        this.isOrther();
        this.model.box = false;
      } else {
        this.isHotel();
      }
      // this.table_two = false;
      // this.table_one = true;
    },
    // 判断酒店房型是不是重复添加到套票项里
    isOrther() {
      this.tableData.forEach(item => {
        if (item.elementIdex == this.spare11) {
          item.spare12 = this.ticketTableData;
          let that = this.$store.getters.data().reportPrice;
          if (that.currentAction == "update") {
            item.spare11 = "1";
          } else {
            item.spare11 = null;
          }
        }
      });
    },

    isHotel() {
      this.isOrther();
      let indexArr = [];
      this.tableData.forEach(item => {
        console.log(item, "item");
        if (typeof item.spare12 == "string") {
          item.spare12 = JSON.parse(item.spare12);
        }
        if(item.spare12!=null){
        item.spare12.forEach(index => {
          if (index.hotel_ID != null) {
            indexArr.push(index);
            // console.log(index.hotel_ID, "isHotel");
          }
        });}
      });
      if(indexArr.length>0){
        const newArr = indexArr.map(item => item.goodid);
      const isRepeat = newArr.some(
        (x, index, arr) => arr.findIndex(y => y == x) != index
      );
      if (isRepeat) {
        console.log("重复",indexArr);
        this.$Message.error("套票项选择酒店房型重复");
        this.model.box = true;
      } else {
        this.model.box = false;
        this.$Message.success("保存成功");
      }

      }else{
        this.model.box = false;
        this.$Message.success("保存成功")
      
    }
      // console.log("tag", indexArr);
      // if (isRepeat) {
      //   console.log("重复");
      //   this.$Message.error("套票项选择酒店房型重复");
      //   this.model.box = true;
      // } else {
      //   this.model.box = false;
      //   this.$Message.success("保存成功");
      // }
    }
  },
};
</script>
<style lang="less" scoped>
.from_table_box {
  background: white;
  margin-top: 15px;
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 3px 15px;
    .tab {
      display: flex;

      .tab_item {
        line-height: 28px;
        font-size: 14px;
        margin-bottom: 0;
        color: #828282;
        padding: 0 8px;
        &.tab_item:hover {
          color: #82aaf1;
          cursor: pointer;
        }
        &.tab_item_click {
          font-weight: bolder;
          border-bottom: 2px solid #03a9f4;
        }
      }
    }
    .button_box {
      display: flex;
      margin-right: 12px;
      .button_item {
        margin-left: 19px;
        line-height: 28px;
        border: 0px;
        color: #009688;
        &.button_item:hover {
          cursor: pointer;
          color: #ff9800;
          border-color: #ff9800;
          border: none;
        }
      }
    }
  }
}
.button_box01{
  cursor: pointer;
}
</style>
